<template>
  <div class="cart">

    <p class="allTitle"><a onclick="window.history.go(-1)"></a>我的购物车</p>

    <div class="hasGoods" v-if="loadStart">
      <div  v-if="this.List.length>0">
          <div class="cartInfo">
            <ul>
              <li v-for="(item,index) in List">
                <img :src="ksrc+item.goods_logo" :onerror="imgError">
                <div class="info">
                  <p class="sTitle">{{item.goods_name}}</p>
                  <p class="sPrce">¥{{item.goods_price}}</p>
                  <p class="sNum">
                    <span class="less" @click="less(item)"></span>
                    <input type="text" v-model="item.goods_count" name="">
                    <span class="add" @click="add(item)"></span>
                  </p> 
                </div>
              </li>
            </ul>
          </div>

          <div class="clickBox">
              <button @click="goAdd">结算</button>
              <span class="num">合计 :<em> ¥{{sNum}}</em></span>
          </div>
      </div>

      <div class="notGoods" v-else>
          <div class="cartBg">
              <em></em>
              <p>您的购物车还是空！</p>
              <router-link tag="a" to="/">马上去购物</router-link>
          </div>
      </div>

    </div>

    <p class="loading" v-if="!loadStart"><span></span></p>

    <!--如果没有商品时显示-->
    

  </div>
</template>

<script>
import {Get,Put,Delete} from '@/config/api.js'
import axios from 'axios'
import { mapState } from 'vuex'
export default {
  name: 'cart',
  data () {
    return {
      gShow:false,//购物车是否有商品
      allClick:false,//是否全选
      loadStart:false,
      List:[],
      getList:[],
      ksrc:'http://oub2urxei.bkt.clouddn.com/',
      goodsId:''
    }
  },
  mounted(){
    this.getData()
  },
  computed:{
    ...mapState({
      imgError: 'imgError'
    }),
    sNum:function(){
      let num=0;
      for(var i=0;i<this.List.length;i++){
          num+=parseInt(this.List[i].goods_count*this.List[i].goods_price)
      }
      return num
    }
  },
  methods:{
    goAdd(){
      this.$router.push({path:'/cartAdd',query: { id: this.List }})
    },
    getData(){
        let that=this
        Get('/carts?_sort=-created_at',this.$store.state.token).then(function(reg){
          that.loadStart=true
          that.List=reg.data
        })
    },
    less(e){
      let that=this
      if(e.goods_count>1){
          e.goods_count--
          let that=this
          let data={
            "goods_count":e.goods_count
          }
          Put('/carts/'+e.id,this.$store.state.token,data).then(function(){
            that.getData()
          })
      }else{
        Delete('/carts/'+e.id,this.$store.state.token,data).then(function(){
            that.getData()
          })
      }
    },
    add(e){
      e.goods_count++
      let that=this
      let data={
        "goods_count":e.goods_count
      }
      Put('/carts/'+e.id,this.$store.state.token,data).then(function(){
        that.getData()
      })
    },
    //选择单个商品
    clickList(e){
      if(e.start==false){
        e.start=true;
        this.getList.push(e);
      }else{
        var index = this.getList.indexOf(e);
        if (index > -1) {
        this.getList.splice(index, 1);
        e.start=false;
        }
        this.allClick=false
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped="" type="text/css">

$vw:750;
@function h($px){@return $px/$vw*100vw}



.cart{padding-bottom: h(110)}
.title{height: h(70);background: #f0eff5;font-size: h(30);padding:0 h(30);color: #38b6f0;line-height: h(70)}
.cartInfo .click{width: h(60);float: left;height: h(166);display: block;background: url('/static/images/out.png') 10% 50% no-repeat;background-size: 50%}
.cartInfo .click.active{background: url('/static/images/on.png') 10% 50% no-repeat;background-size: 50%}
.cartInfo ul li{background: #fff;position: relative;overflow: hidden;padding:h(25);margin-bottom: h(20)}
.cartInfo ul li img{width: h(166);height: h(166);float: left;border: #ddd solid 1px;}
.cartInfo ul li .info{float: left;width: h(430);padding-left: h(30)}
.cartInfo .sTitle{font-size:h(32)}
.cartInfo .sPrce{font-size: h(30);color: #fd7b58;line-height: 1.6}

.sNum{height: 2.5rem;background: #fff;width: 100%;display: flex;align-items: center;}
.sNum span{font-size: h(60);display: inline-block;width: h(50);height: h(50);color: #999999;border: #999999 solid 1px;display: inline-block;line-height: h(60);vertical-align: center;}
.sNum span.less{background: url('/static/images/less.png') no-repeat;background-size: 100%;}
.sNum span.add{background: url('/static/images/add.png') no-repeat;background-size: 100%;}
.sNum input{width: h(100);background: #fff;height: h(51);border: #999999 solid 1px;border-radius: h(4);text-align: center;margin: 0 h(10);display: inline-block;vertical-align: center;}


.clickBox{height: h(100);line-height: h(100);background: #fff;padding-left:h(25);font-size: h(36)}
.clickBox .click{width: h(160);float: left;height: h(100);display: block;background: url('/static/images/out.png') 2% 50% no-repeat;background-size: auto 30%;padding-left: h(60)}
.clickBox .active{background: url('/static/images/on.png') 2% 50% no-repeat;background-size: auto 30%;}
.clickBox button{float: right;background: #fd7b58;width: h(220);height: 100%;border: none;font-size: h(36);color: #fff}
.clickBox .num{padding-right: h(20);font-size: h(30)}
.clickBox .num em{color: #fd7b58;font-style:normal;font-size: h(38) }

.cartBg{text-align: center;padding-top: h(80)}
.cartBg em{width: h(319);height: h(252);background: url('/static/images/cart.png');background-size: 100%;display: block;margin: auto;}
.cartBg p{font-size: h(36);color:#c8c7c9;margin-top: h(30)}
.cartBg a{display: block;font-size: h(30);width: h(280);height:h(70);line-height: h(70);border-radius: h(8);background: #fd7b58;color: #fff;text-decoration: none;text-align: center;margin: auto;margin-top: h(70);}
</style>



